<template>  
    <div style="width: 100%;background-color: #eee;font-size: 14px;padding: 20px 0;">
      <div><Header></Header></div>
      <div style="display: flex;width: 70%;margin: 0 auto;background-color: #FFFFFF;border-radius: 5px;">
        <div>
          <el-aside width="200px">
            <el-menu :default-openeds="['1']">
              <el-submenu index="1">
                <template slot="title"><i class="el-icon-message"></i>后台管理</template>
                <el-menu-item-group>
                  <el-menu-item index="1-1" @click="studentManager">学生管理</el-menu-item>
                  <el-menu-item index="1-2" @click="TeacherManager">教师管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-aside>
        </div>
        <div style="flex: 1;border-right: 1px solid #cccccc;">
          <div style="height: 170px;display: flex;margin: 10px 20px;border-bottom: 1px solid #cccccc;" class="item">
            <div style="margin: 20px 0;width: 200px;">
              <el-image src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
                style="height: 130px;width: 200px;object-fit: cover;cursor: pointer;"></el-image>
            </div>
            <div style="margin: 30px 20px;">
              <div style="font-size: 18px;color: #000000;cursor: pointer;">黑马程序员欢迎您！ </div>
              <div style="display: flex;color: #cccccc;line-height: 40px;">
                <span class="icon-active"><i class="el-icon-alarm-clock el-icon--right"></i>2020.8</span>
                <span class="icon-active" icon="el-icon-link" style="margin-left: 10px;"><i
                    class="el-icon-view el-icon--right"></i>17690人围观</span>
                <span class="icon-active" icon="el-icon-link" style="margin-left: 10px;"><i
                    class="el-icon-chat-round el-icon--right"></i>47次吐槽</span>
              </div>
              <div style="overflow: hidden;text-overflow: ellipsis;line-height: 20px;color: gray;">
                欢迎新同学，前世的五百次回眸，换来今生你我的不期而遇。 梦想清澈高远，究竟哪里才是诗和远方的田野？...
              </div>
            </div>
          </div>
  
          <div style="height: 170px;display: flex;margin: 10px 20px;border-bottom: 1px solid #cccccc;" class="item">
            <div style="margin: 20px 0;width: 200px;">
              <el-image src="https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg"
                style="height: 130px;width: 200px;object-fit: cover;cursor: pointer;"></el-image>
            </div>
            <div style="margin: 30px 20px;">
              <div style="font-size: 18px;color: #000000;cursor: pointer;">SpringBoot整合MyBatis</div>
              <div style="display: flex;color: #cccccc;line-height: 40px;">
                <span class="icon-active"><i class="el-icon-alarm-clock el-icon--right"></i>2020.8</span>
                <span class="icon-active" icon="el-icon-link" style="margin-left: 10px;"><i
                    class="el-icon-view el-icon--right"></i>200000000人围观</span>
                <span class="icon-active" icon="el-icon-link" style="margin-left: 10px;"><i
                    class="el-icon-chat-round el-icon--right"></i>47次吐槽</span>
              </div>
              <div style="overflow: hidden;text-overflow: ellipsis;line-height: 20px;color: gray;">
                <span> @ConfigurationProperties用法</span>
                <span>:通过@ConfigurationProperties注解加上prefix绑定的前缀可找到对应的配置文件中的参数值进行绑定。</span>
               
              </div>
            </div>
          </div>
  
  
          <div style="margin: 30px 0;text-align: center;">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="currentPage" :page-sizes="[5, 10, 20, 30, 40]" :page-size="5"
              layout="total, sizes, prev, pager, next, jumper" :total="10">
            </el-pagination>
          </div>
  
        </div>
        <div style="width: 365px;">
          <div style="height: 220px;margin: 30px 20px;border: 1px solid #cccccc;border-radius: 5PX;">
  
            <div style="text-align: center;color: #626262;">
              <div style="font-size: 18px;line-height: 40px;">阿伟</div>
              <div>世上事本无难易，为之则易！</div>
              <el-button type="primary" icon="el-icon-thumb" style="width: 220px;margin: 10px 0;">联系我</el-button>
            </div>
            <div style="display: flex;text-align: center;margin-top: 20px;">
              <div style="width: 33.3%;">
                <div style="line-height: 30px;font-size: 18px;">
                  2020
                </div>
                <div style="font-size: 12px;">
                  文章
                </div>
              </div>
              <div style="width: 33.3%;">
                <div style="line-height: 30px;font-size: 18px;">
                  2020
                </div>
                <div style="font-size: 12px;">
                  文章
                </div>
              </div>
              <div style="flex: 1;">
                <div style="line-height: 30px;font-size: 18px;">
                  2020
                </div>
                <div style="font-size: 12px;">
                  文章
                </div>
              </div>
            </div>
          </div>
  
          <div style="height: 340px;margin: 30px 20px;border: 1px solid #cccccc;border-radius: 5PX;">
            <el-calendar v-model="value">
            </el-calendar>
          </div>
  
          <div style="margin: 30px 20px;">
            <div style="background-color: #EEEEEE;height: 40px;display: flex;">
              <div style="border-right: 1px solid #cfcfcf;text-align: center;height: 40px;width: 50px;line-height: 40px;">
                <i class="el-icon-menu el-icon--right"></i>
              </div>
              <div style="font-size: 16px;line-height: 40px;font-weight: 600;margin-left: 10px;">
                Tab
              </div>
            </div>
            <div style="margin: 5px 20px;">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="最近更新" name="first">
                  <div
                    style="padding: 5px 0;display: flex;border-bottom: 1px dashed #cccccc;overflow: hidden;text-overflow: ellipsis;">
                    <div
                      style="background-color: #707070;color: #FFFFFF;width: 20px;height: 20px;border-radius: 50%;text-align: center;line-height: 20px;">
                      1</div>
                    <div style="color: #707070;line-height: 20px;font-size: 12px;margin-left: 10px;cursor: pointer;">
                      2021年6月份自我小结</div>
                  </div>
                  <div
                    style="padding: 5px 0;display: flex;border-bottom: 1px dashed #cccccc;overflow: hidden;text-overflow: ellipsis;">
                    <div
                      style="background-color: #707070;color: #FFFFFF;width: 20px;height: 20px;border-radius: 50%;text-align: center;line-height: 20px;">
                      2</div>
                    <div style="color: #707070;line-height: 20px;font-size: 12px;margin-left: 10px;cursor: pointer;">
                      2021年5月份自我小结</div>
                  </div>
                </el-tab-pane>
                <!-- <el-tab-pane label="热门文章" name="second">
                  <div
                    style="padding: 5px 0;display: flex;border-bottom: 1px dashed #cccccc;overflow: hidden;text-overflow: ellipsis;">
                    <div
                      style="background-color: #707070;color: #FFFFFF;width: 20px;height: 20px;border-radius: 50%;text-align: center;line-height: 20px;">
                      1</div>
                    <div style="color: #707070;line-height: 20px;font-size: 12px;margin-left: 10px;cursor: pointer;">
                      个人亲身感受：舌尖上的中国</div>
                  </div>
                  <div
                    style="padding: 5px 0;display: flex;border-bottom: 1px dashed #cccccc;overflow: hidden;text-overflow: ellipsis;">
                    <div
                      style="background-color: #707070;color: #FFFFFF;width: 20px;height: 20px;border-radius: 50%;text-align: center;line-height: 20px;">
                      2</div>
                    <div style="color: #707070;line-height: 20px;font-size: 12px;margin-left: 10px;cursor: pointer;">
                      个人亲身感受：舌尖上的中国</div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="站长推荐" name="third">
                  <div
                    style="padding: 5px 0;display: flex;border-bottom: 1px dashed #cccccc;overflow: hidden;text-overflow: ellipsis;">
                    <div
                      style="background-color: #707070;color: #FFFFFF;width: 20px;height: 20px;border-radius: 50%;text-align: center;line-height: 20px;">
                      1</div>
                    <div style="color: #707070;line-height: 20px;font-size: 12px;margin-left: 10px;cursor: pointer;">还能读多少书？
                    </div>
                  </div>
                  <div
                    style="padding: 5px 0;display: flex;border-bottom: 1px dashed #cccccc;overflow: hidden;text-overflow: ellipsis;">
                    <div
                      style="background-color: #707070;color: #FFFFFF;width: 20px;height: 20px;border-radius: 50%;text-align: center;line-height: 20px;">
                      2</div>
                    <div style="color: #707070;line-height: 20px;font-size: 12px;margin-left: 10px;cursor: pointer;">还能读多少书？
                    </div>
                  </div>
                </el-tab-pane> -->
              </el-tabs>
            </div>
          </div>
  
          <!-- <div style="height: 340px;margin: 30px 20px;">
            <div style="background-color: #EEEEEE;height: 40px;display: flex;">
              <div style="border-right: 1px solid #cfcfcf;text-align: center;height: 40px;width: 50px;line-height: 40px;">
                <i class="el-icon-chat-dot-round el-icon--right"></i>
              </div>
              <div style="font-size: 16px;line-height: 40px;font-weight: 600;margin-left: 10px;">
                最新留言
              </div>
            </div>
            <div style="margin: 5px 20px;">
              <div style="padding: 10px 0;border-bottom: 1px dashed #cccccc;">
                <div style="display: flex;line-height: 30px;">
                  <div style="width: 30px;height: 30px;">
                    <el-image src="http://www.aswait.com/zb_users/avatar/0.png"
                      style="height: 30px;width: 30px;object-fit: cover;border-radius: 50%;"></el-image>
                  </div>
                  <div style="margin-left: 10px;color: #5e5e5e;">亚马逊品牌授权</div>
                  <div style="flex: 1;text-align: right;color: gray;">08月19日</div>
                </div>
                <div style="background-color: #eee;margin: 5px 0 5px 0;padding: 5px 5px;color: #5e5e5e;">
                  非常喜欢这个文章！
                </div>
              </div>
  
              <div style="padding: 10px 0;border-bottom: 1px dashed #cccccc;">
                <div style="display: flex;line-height: 30px;">
                  <div style="width: 30px;height: 30px;">
                    <el-image src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
                      style="height: 30px;width: 30px;object-fit: cover;border-radius: 50%;"></el-image>
                  </div>
                  <div style="margin-left: 10px;color: #5e5e5e;">头条新闻</div>
                  <div style="flex: 1;text-align: right;color: gray;">08月19日</div>
                </div>
                <div style="background-color: #eee;margin: 5px 0 5px 0;padding: 5px 5px;color: #5e5e5e;">
                  文章不错关注一下
                </div>
              </div>
  
              <div style="padding: 10px 0;border-bottom: 1px dashed #cccccc;">
                <div style="display: flex;line-height: 30px;">
                  <div style="width: 30px;height: 30px;">
                    <el-image src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
                      style="height: 30px;width: 30px;object-fit: cover;border-radius: 50%;"></el-image>
                  </div>
                  <div style="margin-left: 10px;color: #5e5e5e;">亚马逊品牌授权</div>
                  <div style="flex: 1;text-align: right;color: gray;">08月19日</div>
                </div>
                <div style="background-color: #eee;margin: 5px 0 5px 0;padding: 5px 5px;color: #5e5e5e;">
                  支持老大~~~~~~~~
                </div>
              </div>
            </div>
          </div> -->
        </div>
      </div>
     
    </div>
  
  </template>
   
  <script>
  import Header from "@/components/Header";
  export default {
    components: {Header},
    data() {
      return {
        value: new Date(),
        currentPage: 4,
        activeName: 'second',
  
      };
    },
    mounted() {
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      studentManager() {
        this.$router.push("/register")
      },
      TeacherManager(){
        this.$router.push("/teacher")
      }
  
    }
  };
  </script>
   
  <style src="@/style/index.css"></style> 